import React, { Component } from 'react';
import store from './store'
import {changeInputAction, addItemAction, deleteItemAction, getTodoList, getMyListAction} from './store/actionFactory'
import TodoListUI from './todoListUI'

class todoList extends Component {
  constructor(props){
    super(props);
    this.state = store.getState()
    this.changeInputValue = this.changeInputValue.bind(this)
    // 订阅模式
    this.storeChange = this.storeChange.bind(this)
    this.addItem = this.addItem.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
    store.subscribe(this.storeChange)
  }
  componentDidMount(){
    // thunk
    // const action = getTodoList()
    // store.dispatch(action)
    // saga
    const action = getMyListAction()
    store.dispatch(action)
  }
  render() { 
    return ( 
      <TodoListUI
        inputValue={this.state.inputValue}
        changeInputValue={this.changeInputValue}
        addItem={this.addItem}
        list={this.state.list}
        deleteItem={this.deleteItem}
      />
     );
  }
  changeInputValue(e){
    const action = changeInputAction(e.target.value)
    store.dispatch(action)
  }
  storeChange(){
    this.setState(store.getState())
  }
  addItem(){
    const action = addItemAction()
    store.dispatch(action)
  }
  deleteItem(index){
    const action = deleteItemAction(index)
    store.dispatch(action)
  }
}
 
export default todoList;